<script setup lang="ts">
import { onMounted, ref } from "vue";
import { addMessage, getMessageById, Message } from "@/api/message";
import { formRules } from "./utils/rule";
import ReCol from "@/components/ReCol";
import ReEditor from "@/components/ReEditor";
import { useRoute, useRouter } from "vue-router";
import { Employee, getSimpleEmployeeList } from "@/api/employee";
import { message } from "@/utils/message";
import { UploadStorage } from "@/components/ReUpload";

defineOptions({
  name: "SendMessage"
});
const uploadRef = ref();
const loading = ref<boolean>(false);
const data = ref<Message>({});
const receivers = ref<Array<Employee>>([]);
const ruleFormRef = ref();
const router = useRouter();
const save = (status: string) => {
  ruleFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      data.value.status = status;
      addMessage(data.value)
        .then(() => {
          router.back();
        })
        .catch(() => {
          message("提交失败", { type: "error" });
        });
    }
  });
};

onMounted(() => {
  getSimpleEmployeeList().then(res => {
    receivers.value = res;
  });
  const query = useRoute().query;
  if (query?.id) {
    loading.value = true;
    getMessageById(query.id as string).then(res => {
      data.value = res;
      loading.value = false;
    });
  }
});
</script>

<template>
  <div class="main">
    <ElCard v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>编辑消息</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="data"
        :rules="formRules"
        label-width="82px"
        class="h-[99/100]"
      >
        <el-row :gutter="30">
          <re-col>
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="data.title"
                clearable
                placeholder="请输入标题"
              />
            </el-form-item>
          </re-col>
          <re-col>
            <el-form-item label="收件人" prop="receivers">
              <el-select-v2
                v-model="data.receivers"
                :options="receivers"
                :props="{ value: 'userId', label: 'name' }"
                class="w-full"
                placeholder="请选择收件人"
                filterable
                multiple
              >
                <template #default="{ item }">
                  <span style="margin-right: 8px">{{ item.name }}</span>
                  <span style="color: #a1a3a6">
                    {{ item.workId }}
                  </span>
                </template>
              </el-select-v2>
            </el-form-item>
          </re-col>
          <re-col>
            <el-form-item label="文件" prop="file">
              <UploadStorage ref="uploadRef" />
            </el-form-item>
          </re-col>
          <re-col>
            <el-form-item label="内容" prop="content">
              <ReEditor
                v-model="data.content"
                placeholder="请输入消息正文....."
              />
            </el-form-item>
          </re-col>
          <re-col>
            <el-form-item>
              <el-button type="primary" @click="save('1')">发送</el-button>
              <el-button type="warning" @click="save('2')">暂存</el-button>
              <el-button @click="router.back()">返回</el-button>
            </el-form-item>
          </re-col>
        </el-row>
      </el-form>
    </ElCard>
  </div>
</template>
